<template>
  <div class="score-level">
    <div v-if="data.level" class="number-format">
      <span :class="`number ${data.color} n-regular-14`">{{ number }}</span>
      <span :class="`level ${data.color} cn-regular-12`">{{ data.level }}</span>
    </div>
    <div v-else class="number-format">
      <span class="cn-regular-14 text-2-7">--</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

defineOptions({
  name: 'KgjJuejinScoreLevel'
});

interface Props {
  number: number | string;
}

const props = withDefaults(defineProps<Props>(), {});

const data = computed(() => {
  let value = 0;

  if (typeof props.number === 'number') {
    value = props.number;
  } else {
    value = Number(props.number);
  }

  let colorTmp = '';
  let levelTmp = '';
  if (value >= 4.71) {
    colorTmp = 'red';
    levelTmp = '高';
  } else if (value >= 4.41) {
    colorTmp = 'orange';
    levelTmp = '中';
  } else if (value > 0) {
    colorTmp = 'gray';
    levelTmp = '低';
  } else {
    colorTmp = 'gray';
    levelTmp = '';
  }

  return {
    color: colorTmp,
    level: levelTmp
  };
});
</script>

<style lang="scss" scoped>
.score-level {
  .number-format {
    display: flex;
    align-items: center;
    justify-content: center;

    .number {
      color: var(--text-2-7);
    }

    .red {
      color: var(--error-6);
    }

    .orange {
      color: var(--warning-6);
    }

    .gray {
      color: var(--text-2-4);
    }

    .level {
      box-sizing: border-box;
      display: inline-block;
      width: 20px;
      height: 16px;
      margin-left: 4px;
      line-height: 16px;
      text-align: center;
      border-radius: 2px;
    }
  }
}
</style>
